<template>

	<div>
		<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
			<el-tab-pane :label="tab.all" name="first">

				<search-container @on-search="search"></search-container>

				<el-tree ref="carTree" :data="treeData" show-checkbox check-strictly node-key="id" :props="defaultProps"
					style="height: 20vh; overflow: auto;border: 1px solid lightgray;" @check-change="handleNodeClick">
					<span slot-scope="{ node, data }" style="font-size: 12px;">
						<span v-if="data.type!=='car'">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('离线')"
							style="color:#000">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('从未上线')"
							style="color:#9A9A9A">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('停车')"
							style="color:#F69B51">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('熄火')"
							style="color:#F30635">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('行驶')"
							style="color:#3D9B73">{{ node.label }}</span>
					</span>

				</el-tree>

				<div style="padding: 5px;display: flex;justify-content: space-around;">
					<div :style="{'background':run.selected}" @click="changeRun('run')">
						<img src="~@/assets/images/cljk/cl-run.png" alt="logo" width="30px" height="30px" />
					</div>
					<div :style="{'background':stop.selected}" @click="changeRun('stop')">
						<img src="~@/assets/images/cljk/cl-stop.png" alt="logo" width="30px" height="30px" />
					</div>

					<div :style="{'background':xh.selected}" @click="changeRun('xh')">
						<img src="~@/assets/images/cljk/cl-xh.png" alt="logo" width="30px" height="30px" />
					</div>
				</div>
				<el-divider></el-divider>
				<el-form ref="form" :model="form" label-width="80px" size="mini">

					<el-form-item label="通道编号" prop="channelNo">
						<el-select v-model="form.channelNo" placeholder="请选择通道" size="mini">
							<el-option v-for="item in channelOpts " :label="item.label" :value="item.value"
								:key="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="开始时间" prop="startTime">
						<el-date-picker v-model="form.startTime" type="datetime" placeholder="选择日期时间" />
					</el-form-item>

					<el-form-item label="结束时间" prop="endTime">
						<el-date-picker v-model="form.endTime" type="datetime" placeholder="选择日期时间" />
					</el-form-item>

					<el-form-item label="存储方式" prop="storageType">
						<el-radio v-model="form.storageType" label="1">设备</el-radio>
						<el-radio v-model="form.storageType" label="2">服务器</el-radio>
					</el-form-item>
					<el-form-item label="录像类型" prop="alarm">
						<el-radio v-model="form.alarm" label="0">常规</el-radio>
						<el-radio v-model="form.alarm" label="1">报警</el-radio>
					</el-form-item>
				</el-form>

				<div style="text-align: center;">
					<el-button type="primary" @click="onSubmit" :loading="searchBtn.loading" :disabled="searchBtn.loading">搜索</el-button>
				</div>
			</el-tab-pane>
			<el-tab-pane :label="tab.online" name="second">
				<search-container @on-search="search"></search-container>
				
				<el-tree ref="carTree" :data="treeData" show-checkbox check-strictly node-key="id" :props="defaultProps"
					style="height: 20vh; overflow: auto;border: 1px solid lightgray;" @check-change="handleNodeClick">
					<span slot-scope="{ node, data }" style="font-size: 12px;">
						<span v-if="data.type!=='car'">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('离线')"
							style="color:#000">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('从未上线')"
							style="color:#9A9A9A">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('停车')"
							style="color:#F69B51">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('熄火')"
							style="color:#F30635">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('行驶')"
							style="color:#3D9B73">{{ node.label }}</span>
					</span>
				
				</el-tree>
				<div style="padding: 5px;display: flex;justify-content: space-around;">
					<div :style="{'background':run.selected}" @click="changeRun('run')">
						<img src="~@/assets/images/cljk/cl-run.png" alt="logo" width="30px" height="30px" />
					</div>
					<div :style="{'background':stop.selected}" @click="changeRun('stop')">
						<img src="~@/assets/images/cljk/cl-stop.png" alt="logo" width="30px" height="30px" />
					</div>
				
					<div :style="{'background':xh.selected}" @click="changeRun('xh')">
						<img src="~@/assets/images/cljk/cl-xh.png" alt="logo" width="30px" height="30px" />
					</div>
				</div>
				
				<el-divider></el-divider>
				<el-form ref="form" :model="form" label-width="80px" size="mini">
				
					<el-form-item label="通道编号" prop="channelNo">
						<el-select v-model="form.channelNo" placeholder="请选择通道" size="mini">
							<el-option v-for="item in channelOpts " :label="item.label" :value="item.value"
								:key="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="开始时间" prop="startTime">
						<el-date-picker v-model="form.startTime" type="datetime" placeholder="选择日期时间" />
					</el-form-item>
				
					<el-form-item label="结束时间" prop="endTime">
						<el-date-picker v-model="form.endTime" type="datetime" placeholder="选择日期时间" />
					</el-form-item>
				
					<el-form-item label="存储方式" prop="storageType">
						<el-radio v-model="form.storageType" label="1">设备</el-radio>
						<el-radio v-model="form.storageType" label="2">服务器</el-radio>
					</el-form-item>
					<el-form-item label="录像类型" prop="alarm">
						<el-radio v-model="form.alarm" label="0">常规</el-radio>
						<el-radio v-model="form.alarm" label="1">报警</el-radio>
					</el-form-item>
				</el-form>
				
				<div style="text-align: center;">
					<el-button type="primary" @click="onSubmit" :loading="searchBtn.loading" :disabled="searchBtn.loading">搜索</el-button>
				</div>
			</el-tab-pane>
			<el-tab-pane :label="tab.offline" name="third">

			</el-tab-pane>
		</el-tabs>

	</div>


</template>

<script>
	import {
		getCarOrgList,
		videoPlayBack,
		getVideoPlayBack
	} from '@/api/cljk.js';
	import {
		login_key
	} from '@/config/storage-keys';
	import searchContainer from '../../cljk-view/left/search-container.vue'
	export default {
		name: 'leftContent',
		components: {

			'search-container': searchContainer

		},

		data() {

			return {
				searchBtn: {
					loading: false
				},
				channelOpts: [{
					label: '全部',
					value: 0
				}],

				form: {
					channelNo: 0,
					startTime: new Date(new Date().getTime() - 3600 * 1000),
					endTime: new Date(),
					storageType: "2",
					alarm: "0",
					simNo: '',
					vehId:null
				},
				activeName: 'first',
				user: null,
				tab: {
					all: '全部(1000辆)',
					online: '在线(1000辆)',
					offline: '离线(1000辆)',
				},
				init: true,
				searchParam: {
					userId: null,
					searchType: 0,
					onlineType: 0,
					videoType: 0,
					connectType: 0,
					runType: 0,
					syxz: null,
					searchKey: null,
				},
				treeData: [],
				run: {
					selected: null,
					num: 0
				},
				stop: {
					selected: null,
					num: 0
				},
				xh: {
					selected: null,
					num: 0
				},
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				checkedId: '',
				intervalId: null,
				countTime: new Date(),
				requestCount: 0,
				verifyCode: null,
				searchVideoParam:null
			}



		},
		methods: {
			startSendingRequests() {
				this.countTime = new Date()
				this.intervalId = setInterval(() => {
					const elapsedTime = Date.now() - this.countTime;
					if (elapsedTime >= 60000) {
						clearInterval(this.intervalId);
						this.searchBtn.loading=false
						this.$message({
							message:'终端未响应',
							type:'warning'
						})
						return;
					}
					this.searchVideoParam={
						simNo: this.form.simNo,
						storageType:2,
						startTime:this.$formatDate(this.form.startTime),
						endTime :this.$formatDate(this.form.endTime),
						vehId:this.form.vehId
					}
					getVideoPlayBack({
						simNo: this.form.simNo,
						startTime:this.$formatDate(this.form.startTime),
						endTime :this.$formatDate(this.form.endTime),
						verifyCode:this.verifyCode
					}).then(res => {
						if (res.code === 200) {
							clearInterval(this.intervalId);
							this.searchBtn.loading=false
							console.log('请求成功，已停止发送请求');
							this.$emit('video-list',res.data)
							this.$emit('search-video-param',this.searchVideoParam)
							if(res.data.length===0){
								this.$message({
									message:res.msg,
									type:'warning'
								})
							}
							
						}

					})
					this.requestCount++;
					if (this.requestCount >= 60 && !this.responseData) {
						clearInterval(this.intervalId);
						console.log('已发送60次请求但未成功，停止发送请求');
					}
				}, 1000);
			},

			onSubmit() {

				if (this.form.simNo && this.form.simNo !== '') {
					var param = JSON.parse(JSON.stringify(this.form))
					param.startTime = this.$formatDate(param.startTime)
					param.endTime = this.$formatDate(param.endTime)
					videoPlayBack(param).then(res => {
						if (res.code === 200) {
							if (this.form.storageType === "1") {
								this.verifyCode = res.data
								this.searchBtn.loading=true
								this.startSendingRequests()
							}else if(this.form.storageType === "2"){
								this.searchVideoParam={
									simNo:this.form.simNo,
									storageType:2,
									startTime:param.startTime,
									endTime:param.endTime,
									vehId:this.form.vehId
								}
								this.$emit('video-list',res.data)
								this.$emit('search-video-param',this.searchVideoParam)
							}


						}
					})



				} else {
					this.$message({
						message: '请选择车辆',
						type: 'warning'
					})
				}



			},

			search(p) {
				this.init = false
				var {
					videoType,
					connectType,
					searchType,
					searchKey,
					syxz
				} = p

				this.searchParam.videoType = videoType
				this.searchParam.connectType = connectType
				this.searchParam.searchType = searchType
				this.searchParam.searchKey = searchKey
				this.searchParam.syxz = syxz
				this.searchList()
			},
			handleNodeClick(data, checked, node) {
				if (data && data.type === 'car') {
					this.channelOpts = []
					this.form.simNo = data.simNo
					this.form.vehId=data.id
					if (data.videoChannelNum > 0) {
						this.channelOpts.push({
							label: '全部',
							value: 0
						})
						for (var i = 1; i < data.videoChannelNum + 1; i++) {
							this.channelOpts.push({
								label: 'CH-' + i,
								value: i
							})
						}
					}



				}


				if (checked === true) {
					this.checkedId = data.id;
					this.$emit('on-selected', data)
					this.$refs.carTree.setCheckedKeys([data.id]);
				} else {
					if (this.checkedId == data.id) {
						this.$emit('on-selected', data)
						this.$refs.carTree.setCheckedKeys([data.id]);
					}
				}
			},

			handleClick(tab, event) {
				if (this.activeName === 'first') {
					this.searchParam.onlineType = 0
				} else if (this.activeName === 'second') {
					this.searchParam.onlineType = 1
				} else if (this.activeName === 'third') {
					this.searchParam.onlineType = 2
				}
				this.init = false
				this.searchList()
			},

			searchList() {
				this.searchParam.userId = this.user.id
				getCarOrgList(this.searchParam).then(res => {
					if (res.code === 200) {
						if (this.init) {
							this.tab.all = '全部(' + res.data.total + '辆)'
							this.tab.online = '在线(' + res.data.online + '辆)'
							this.tab.offline = '离线(' + res.data.offline + '辆)'
						}

						this.treeData = res.data.data

					}
				}).catch(err => {
					console.log(err)
				})
			},
			changeRun(type) {
				if (type === 'run') {
					this.stop = {
						selected: null,
						num: 0
					}
					this.xh = {
						selected: null,
						num: 0
					}
					this.run.num++;
					if (this.run.num % 2 !== 0) {
						this.run.selected = '#409EFF'
						this.searchParam.runType = 2
						this.searchList()
					} else {
						this.run.selected = null
						this.searchParam.runType = 0
						this.searchList()
					}

				}

				if (type === 'stop') {
					this.run = {
						selected: null,
						num: 0
					}
					this.xh = {
						selected: null,
						num: 0
					}
					this.stop.num++;
					if (this.stop.num % 2 !== 0) {
						this.stop.selected = '#409EFF'
						this.searchParam.runType = 3
						this.searchList()
					} else {
						this.stop.selected = null
						this.searchParam.runType = 0
						this.searchList()
					}

				}

				if (type === 'xh') {
					this.run = {
						selected: null,
						num: 0
					}
					this.stop = {
						selected: null,
						num: 0
					}
					this.xh.num++;
					if (this.xh.num % 2 !== 0) {
						this.xh.selected = '#409EFF'
						this.searchParam.runType = 4
						this.searchList()
					} else {
						this.xh.selected = null
						this.searchParam.runType = 0
						this.searchList()
					}

				}


			},
		},
		mounted() {
			this.user = this.$Storage.getLocalStorage(login_key)
			this.searchList()
		}

	}
</script>

<style>
</style>